import {
  DockviewReact,
  DockviewReadyEvent,
  IDockviewHeaderActionsProps,
  IDockviewPanelProps
} from "dockview";
import * as React from "react";
import { useEffect } from "react";

import 'dockview/dist/styles/dockview.css';
import '../App.css';
import { Property } from '../components/Property/Property'
import { AnimationCanvas } from '../components/AnimationCanvas/AnimationCanvas'
import { Scene } from "../components/Scene";
import { Library } from "./Library/Library";
import { TimeLine } from "./TimeLine/TimeLine";
import { TimeLineControl } from "./TimeLine/TimeLineControl";

const getPanelWidth = (width: number) => {
  const maxWidth = window.innerWidth / 4;
  return maxWidth > width ? width : maxWidth;
}

const components = {
  default: (props: IDockviewPanelProps) => {
    return (
      <div style={{ padding: "20px", color: "white" }}>
        {props.params.title}
      </div>
    );
  },
  property: (props: IDockviewPanelProps) => {
    useEffect(() => {
      props.api.setSize({
        width: getPanelWidth(400)
      });
      props.api.setTitle(props.params.title);
    }, []);

    return (
      <Property></Property>
    );
  },

  animationCanvas: (props: IDockviewPanelProps) => {
    return (
      <AnimationCanvas></AnimationCanvas>
    );
  },

  scene: (props: IDockviewPanelProps) => {
    useEffect(() => {
      props.api.setSize({
        width: getPanelWidth(400)
      });
      props.api.setTitle(props.params.title);
    }, []);
    return (
      <Scene></Scene>
    );
  },

  library: (props: IDockviewPanelProps) => {
    useEffect(() => {
      props.api.setSize({
        width: getPanelWidth(400)
      });
      props.api.setTitle(props.params.title);
    }, []);
    return (
      <Library></Library>
    );
  },

  animationTimeLine: (props: IDockviewPanelProps) => {
    useEffect(() => {
      props.api.setTitle(props.params.title);
      props.api.setSize({
        height: 400
      });
    }, []);
    return (
      <TimeLine></TimeLine>
    );
  },
};

const RightControls = (props: IDockviewHeaderActionsProps) => {
  //   if (!props.isGroupActive || !props.activePanel) {
  //     return null;
  // }

  console.log("555", props.activePanel?.id);
  const panelId = props.activePanel?.id;
  if (panelId === "animationTimeLine") {
    return (
      <TimeLineControl></TimeLineControl>
    );
  } else if (panelId === "panel_3") {
    return (
      <div>panel_3</div>
    );
  }
};

export const Panel: React.FC = (props: { theme?: string }) => {
  const onReady = (event: DockviewReadyEvent) => {
    const panel = event.api.addPanel({
      id: "panel_1",
      component: "property",
      params: {
        title: "属性",
      }
    });


    // panel.group.locked = true;
    // panel.group.header.hidden = true;

    event.api.addPanel({
      id: "panel_2",
      component: "animationCanvas",
      params: {
        title: "Panel 2"
      },
      position: { referencePanel: "panel_1", direction: "right" }
    });

    // event.api.addPanel({
    //   id: "panel_3",
    //   component: "default",
    //   params: { 
    //     title: "Panel 3"
    //   }
    // });

    event.api.addPanel({
      id: "panel_3",
      component: "scene",
      params: {
        title: "scene"
      },
      position: { referencePanel: "panel_2", direction: "right" }
    });

    const panel4 = event.api.addPanel({
      id: "panel_4",
      component: "library",
      params: {
        title: "Library"
      },
      position: { referencePanel: "panel_3", direction: "below" }
    });

    event.api.addPanel({
      id: "animationTimeLine",
      component: "animationTimeLine",
      params: {
        title: "animationTimeLine"
      },
      position: { referencePanel: "panel_2", direction: "below" }
    });

    // panel5.group!.model.header.hidden = true;
    // panel5.group!.model.locked = true;

    // event.api.addPanel({
    //   id: "panel_6",
    //   component: "default",
    //   params: {
    //     title: "Panel 6"
    //   },
    //   position: { referencePanel: "panel_4", direction: "below" }
    // });

    // event.api.addPanel({
    //   id: "panel_7",
    //   component: "default",
    //   params: {
    //     title: "Panel 7"
    //   },
    //   position: { referencePanel: "panel_6", direction: "right" }
    // });
  };

  return (
    <DockviewReact
      rightHeaderActionsComponent={RightControls}
      components={components}
      onReady={onReady}
      className={props.theme || "dockview-theme-abyss"}
    />
  );
};